<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h2>count: {{ counter.count }}</h2>
    <button @click="counter.increment()">count++</button>
    <button @click="counter.asyncIncrement()">async count++</button>
    <button @click="counter.$patch({ count: counter.count + 100 })">patch count++</button>
    <hr>
    <h2>{{ counter.msg }}</h2>
    <hr>
    <h2>{{ heading.msg }}</h2>
    <button @click="heading.reversedFun()">update msg</button>
  </div>
</template>


<script setup>
import { useCounterStore } from '../stores/counter.js'
import { useHeadingStore } from '../stores/heading'

const counter = useCounterStore()
console.log(counter.count)

const heading = useHeadingStore()


</script>